<template>
  <div>
    <div style="padding-top:20px">
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">危险化学品经营许可证</span>
          <span class="shop_img_notitle">{{ meta.chemical }}</span>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">营业执照</span>
          <span class="shop_img_notitle">{{ meta.license }}</span>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">统一社会信用代码</span>
          <span class="shop_img_notitle">{{ meta.licenseCode }}</span>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">批发经营证书</span>
          <span class="shop_img_notitle">{{ meta.wholesale }}</span>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">其他证件</span>
          <span class="shop_img_notitle">{{ meta.other }}</span>
        </div>
      </div>

<!--      <div class="account_conter_item">-->
<!--        <div class="account_item">-->
<!--          <span class="account_item_title">{{ $t('sysSetUp.componentsSecurity.accountNumber') }}</span>-->
<!--          <span-->
<!--            class="shop_img_notitle">{{ meta.bankNum == null || meta.bankNum == "" ? $t('sysSetUp.componentsSecurity.none') : meta.bankNum }}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="account_conter_item">-->
<!--        <div class="account_item">-->
<!--          <span class="account_item_title">{{ $t('sysSetUp.componentsSecurity.bank') }}</span>-->
<!--          <span class="shop_img_notitle">{{ meta.bankName == null || meta.bankName == "" ? '无' : meta.bankName }}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="account_conter_item">-->
<!--        <div class="account_item">-->
<!--          <span class="account_item_title">{{ $t('sysSetUp.componentsSecurity.businessCategory') }}</span>-->
<!--          <span class="shop_img_notitle">{{ meta.shopCategoryName ? meta.shopCategoryName : "无" }}</span>-->
<!--        </div>-->
<!--      </div>-->
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">危险化学品经营许可证</span>
          <div class="shop_img">
            <el-image ref="preview" :preview-src-list="srcList" :src="meta.chemical" style="width:140px;height:140px"
                      v-if="meta.chemical"></el-image>
            <span class="shop_img_notitle" v-if="!meta.chemical">危险化学品经营许可证</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">营业执照</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="meta.license" style="width:140px;height:140px" alt=""
                      v-if="meta.license"></el-image>
            <span class="shop_img_notitle" v-if="!meta.license">营业执照</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">统一社会信用代码</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="meta.licenseCode" style="width:140px;height:140px" alt=""
                      v-if="meta.licenseCode"></el-image>
            <span class="shop_img_notitle" v-if="!meta.licenseCode">统一社会信用代码</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">批发经营证书</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="meta.wholesale" style="width:140px;height:140px" alt=""
                      v-if="meta.wholesale"></el-image>
            <span class="shop_img_notitle" v-if="!meta.wholesale">批发经营证书</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">其他证件</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="meta.other" style="width:140px;height:140px" alt=""
                      v-if="meta.other"></el-image>
            <span class="shop_img_notitle" v-if="!meta.other">其他证件</span>
          </div>
        </div>
      </div>
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">{{$t('sysSetUp.componentsSecurity.foodBusinessLicense')}}</span>-->
      <!--          <div class="shop_img">-->
      <!--            <el-image :preview-src-list="srcList" :src="meta.attach.food" style="width:140px;height:140px" alt="" v-if="meta.attach.food"></el-image>-->
      <!--            <span class="shop_img_notitle" v-if="!meta.attach.food">{{$t('sysSetUp.componentsSecurity.noLicenseTemporarily')}}</span>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">{{$t('sysSetUp.componentsSecurity.scenePhotosInTheStore')}}</span>-->
      <!--          <div class="shop_img">-->
      <!--            <el-image :preview-src-list="srcList" :src="meta.attach.scene" style="width:140px;height:140px" alt="" v-if="meta.attach.scene"></el-image>-->
      <!--            <span class="shop_img_notitle" v-if="!meta.attach.scene">{{$t('sysSetUp.componentsSecurity.noScenePhoto')}}</span>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</template>
<script>
import {find, update} from "@/api/company";
import singleUpload from "@/components/Upload/singleUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import utils from "@/utils/utils";
import {mapGetters} from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  components: {singleUpload},
  directives: {permission},
  props: {

    bankInformation: {
      type: Object,
    },
    companyInformation: {
      type: Object,
    },
    companyId: {
      type: String,
      value: '',
    },
  },
  data() {
    return {
      loading: false, // 按钮防双击
      srcList: [],
      meta: {},
    };
  },
  created() {
    this.getData()
    if (utils.isNull(this.meta.attach.mcc)) {
      this.meta.attach.mcc = "0";
    }
  },
  watch: {
    meta: {
      handler(val, old) {
        if (val == null) {
          val.attach == ""
        }
        if (val.attach) {
          if (typeof val.attach == "string") {
            val.attach = JSON.parse(val.attach);
            if (utils.isNull(val.attach.mcc)) {
              val.attach.mcc = "0";
            }
          }
        } else {
          val.attach = {
            license: "",
            idCardFront: "",
            idCardBack: "",
            thedoor: "",
            food: "",
            scene: "",
            mcc: "0"
          };
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getData() {
      this.id = parseInt(this.companyId);
      const _this = this;
      find(this.id).then((response) => {
        console.log(response.data)
        _this.meta = response.data.company;
        _this.meta = response.data.company;


      })
    },
    forceRefresh() {
      this.$forceUpdate()
    },
    submit() {
      var _this = this;
      this.loading = true;
      updateMchShop(this.meta)
        .then((res) => {
          this.loading = false;
          this.$message.success(this.$t('sysSetUp.componentsSecurity.successfullyModified'));
          _this.$store.dispatch("tagsView/delView", _this.$route).then(({visitedViews}) => {
            _this.$router.push({
              path: "/sysMch/list",
            });
          });
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    inputClick() {
      this.$forceUpdate()
    }
  },
};
</script>

<style scoped>
.account_item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 30px;
  margin-left: 50px;
}

.account_item_title {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  width: 160px;
  display: block;
}

.shop_img {
  width: 140px;
  height: 140px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-left: 5px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_img_notitle {
  font-size: 14px;
  color: #c0c4cc;
}

.account_conter_item {
  display: flex;
}
</style>


